Element Plus 实现Icon图标的自动导入

您所在的位置：网站首页 › 自动图标 › Element Plus 实现Icon图标的自动导入

Element Plus 实现Icon图标的自动导入

2024-07-02 14:18| 来源: 网络整理| 查看: 265

Element Plus 官方文档对于Icon图标的自动导入，言之甚少。故博主来写篇文章总结一下，如何正确使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入图标。

1. 安装依赖 npm i -D unplugin-icons unplugin-auto-import

PS: 如果你之前配置ElementPlus组件为“按需导入”，那就只用下unplugin-icons。

2. 修改配置文件

这里以vue.config.js为例（这里配置包含组件按需导入以及图标自动导入）：

const { defineConfig } = require('@vue/cli-service'); // 按需引入ElementPlus组件 const AutoImport = require('unplugin-auto-import/webpack'); const Components = require('unplugin-vue-components/webpack'); const { ElementPlusResolver } = require('unplugin-vue-components/resolvers'); // 自动导入Icon图标 const IconsResolver = require('unplugin-icons/resolver'); const Icons = require('unplugin-icons/webpack'); module.exports = defineConfig({ // ...... configureWebpack: { plugins: [ AutoImport({ resolvers: [ // 这个是组件自动导入 ElementPlusResolver() ] }), Components({ resolvers: [ // 自动注册图标组件 IconsResolver({ // 修改Icon组件前缀，不设置则默认为i,禁用则设置为false prefix: 'icon', // 指定collection，即指定为elementplus图标集ep enabledCollections: ['ep'] }), // 这个是组件自动导入 ElementPlusResolver() ] }), // Icons图标自动下载 Icons({ autoInstall: true }) ] }, }); 3. 图标的使用

例子：

解释：

使用组件解析器IconsResolver时，必须遵循名称转换才能正确推断图标，格式如下:

{prefix}-{collection}-{icon}

prefix是之前配置中设定的

默认情况下，前缀设置为i，而您可以通过配置进行自定义

IconsResolver({ prefix: 'icon', // prefix: 'icon', // 支持非前缀模式 })

collection是 Iconify的图标集ID

icon即为该图标集中某个图标的name

人生人山人海人来人往，自己自尊自爱自由自在。

本文来自博客园，作者：青柠i，转载请注明原文链接：https://www.cnblogs.com/fuct/p/17533365.html

【本文地址】

Element Plus 实现Icon图标的自动导入

Element Plus 实现Icon图标的自动导入

今日新闻

推荐新闻